<template>
  <div
    class="add-invoice"
    :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':top+'px'}"
    ref="div"
    @click="onBtnClicked"
  >
    <slot name="icon"></slot>
    <!-- <p>{{text}}</p> -->
  </div>
</template>

<script>
export default {
  name: "FloatImgBtn",
  props: {
    text: {
      type: String,
      default: "默认文字"
    },
    itemWidth: {
      type: Number,
      default: 40
    },
    itemHeight: {
      type: Number,
      default: 40
    },
    gapWidth: {
      type: Number,
      default: 10
    },
    coefficientHeight: {
      type: Number,
      default: 0.8
    }
  },
  created() {
    this.clientWidth = document.documentElement.clientWidth;
    this.clientHeight = document.documentElement.clientHeight;
    this.left = this.clientWidth - this.itemWidth - this.gapWidth;
    this.top = this.clientHeight * this.coefficientHeight;
  },
  mounted() {
    window.addEventListener("scroll", this.handleScrollStart);
    this.$nextTick(() => {
      const div = this.$refs.div;
      div.addEventListener("touchstart", () => {
        div.style.transition = "none";
      });
      div.addEventListener("touchmove", e => {
        if (e.targetTouches.length === 1) {
          let touch = event.targetTouches[0];
          this.left = touch.clientX - this.itemWidth / 2;
          this.top = touch.clientY - this.itemHeight / 2;
        }
      });
      div.addEventListener("touchend", () => {
        div.style.transition = "all 0.3s";
        if (this.left > this.clientWidth / 2) {
          this.left = this.clientWidth - this.itemWidth - this.gapWidth;
        } else {
          this.left = this.gapWidth;
        }
      });
    });
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollStart);
  },
  methods: {
    onBtnClicked() {
      this.$emit("onFloatBtnClicked");
    },
    handleScrollStart() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.handleScrollEnd();
      }, 300);
      this.currentTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.left > this.clientWidth / 2) {
        this.left = this.clientWidth - this.itemWidth / 2;
      } else {
        this.left = -this.itemWidth / 2;
      }
    },
    handleScrollEnd() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop === this.currentTop) {
        if (this.left > this.clientWidth / 2) {
          this.left = this.clientWidth - this.itemWidth - this.gapWidth;
        } else {
          this.left = this.gapWidth;
        }
        clearTimeout(this.timer);
      }
    }
  },
  data() {
    return {
      timer: null,
      currentTop: 0,
      clientWidth: 0,
      clientHeight: 0,
      left: 0,
      top: 0
    };
  }
};
</script>

<style lang="less" scoped>
.ys-float-btn {
  background: rgb(255, 255, 255);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  color: #666666;
  z-index: 20;
  transition: all 0.3s;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: fixed;
  bottom: 20vw;

  img {
    width: 50%;
    height: 50%;
    object-fit: contain;
    margin-bottom: 3px;
  }

  p {
    font-size: 7px;
  }
}
.add-invoice {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.066667rem;
  height: 1.066667rem;
  z-index: 100;
  // bottom: 1.6rem;
  // right: .533333rem;
  left: 85%;
  top: 70%;
  font-size: 0.586667rem;
  border-radius: 50%;
  box-shadow: 0 0 0.266667rem #ddd;
  color: #1989fa;
}
</style>